<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ bike.bike_number }} - 自行车信息</title>
    {% load static %}
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .bike-card {
            border-radius: 1rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        .bike-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 0.5rem;
        }
        .qr-code {
            width: 150px;
            height: 150px;
        }
        .violation-card {
            border-left: 4px solid #dc3545;
        }
        .violation-card.resolved {
            border-left-color: #28a745;
        }
    </style>
</head>
<body>
    <div class="container py-4">
        <!-- 自行车基本信息 -->
        <div class="card bike-card mb-4">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h4 class="mb-0">
                    <i class="bi bi-bicycle"></i> {{ bike.bike_number }}
                </h4>
                {% if not edit_mode %}
                <button type="button" class="btn btn-light btn-sm" onclick="toggleEditMode()">
                    <i class="bi bi-pencil"></i> 编辑信息
                </button>
                {% else %}
                <button type="button" class="btn btn-outline-light btn-sm" onclick="toggleEditMode()">
                    <i class="bi bi-x"></i> 取消编辑
                </button>
                {% endif %}
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        {% if bike.image %}
                        <img src="{{ bike.image.url }}" alt="自行车图片" class="bike-image mb-3">
                        {% else %}
                        <div class="bike-image bg-light d-flex align-items-center justify-content-center mb-3">
                            <i class="bi bi-bicycle display-1 text-muted"></i>
                        </div>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td class="fw-bold">所有人：</td>
                                <td>{{ bike.owner_name }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">学号：</td>
                                <td>{{ bike.owner_student_id|default:"未设置" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">联系电话：</td>
                                <td>
                                    {% if bike.phone_number %}
                                        <a href="tel:{{ bike.phone_number }}" class="text-decoration-none">
                                            <i class="bi bi-telephone"></i> {{ bike.phone_number }}
                                        </a>
                                    {% else %}
                                        <span class="text-muted">未设置</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td class="fw-bold">学院：</td>
                                <td>
                                    <span class="badge bg-secondary">{{ bike.get_college_display }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fw-bold">班级：</td>
                                <td>{{ bike.class_name|default:"未设置" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">型号：</td>
                                <td>{{ bike.model }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">类别：</td>
                                <td>
                                    <span class="badge bg-info">{{ bike.get_category_display }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fw-bold">颜色：</td>
                                <td>{{ bike.color|default:"未设置" }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                
                <!-- 编辑表单 -->
                {% if edit_mode %}
                <div class="mt-4">
                    <div class="card border-warning">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0">
                                <i class="bi bi-pencil-square"></i> 编辑自行车信息
                            </h5>
                        </div>
                        <div class="card-body">
                            <form method="post" enctype="multipart/form-data" id="editForm">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="edit_bike">
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ edit_form.model.id_for_label }}" class="form-label">型号 <span class="text-danger">*</span></label>
                                        {{ edit_form.model }}
                                        {% if edit_form.model.errors %}
                                        <div class="text-danger">
                                            {% for error in edit_form.model.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ edit_form.owner_name.id_for_label }}" class="form-label">所有人 <span class="text-danger">*</span></label>
                                        {{ edit_form.owner_name }}
                                        {% if edit_form.owner_name.errors %}
                                        <div class="text-danger">
                                            {% for error in edit_form.owner_name.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ edit_form.owner_student_id.id_for_label }}" class="form-label">学号</label>
                                        {{ edit_form.owner_student_id }}
                                        {% if edit_form.owner_student_id.errors %}
                                        <div class="text-danger">
                                            {% for error in edit_form.owner_student_id.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ edit_form.phone_number.id_for_label }}" class="form-label">联系电话</label>
                                        {{ edit_form.phone_number }}
                                        {% if edit_form.phone_number.errors %}
                                        <div class="text-danger">
                                            {% for error in edit_form.phone_number.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ edit_form.category.id_for_label }}" class="form-label">类别 <span class="text-danger">*</span></label>
                                        {{ edit_form.category }}
                                        {% if edit_form.category.errors %}
                                        <div class="text-danger">
                                            {% for error in edit_form.category.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ edit_form.college.id_for_label }}" class="form-label">学院</label>
                                        {{ edit_form.college }}
                                        {% if edit_form.college.errors %}
                                        <div class="text-danger">
                                            {% for error in edit_form.college.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ edit_form.class_name.id_for_label }}" class="form-label">班级</label>
                                        {{ edit_form.class_name }}
                                        {% if edit_form.class_name.errors %}
                                        <div class="text-danger">
                                            {% for error in edit_form.class_name.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ edit_form.color.id_for_label }}" class="form-label">颜色</label>
                                        {{ edit_form.color }}
                                        {% if edit_form.color.errors %}
                                        <div class="text-danger">
                                            {% for error in edit_form.color.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ edit_form.purchase_date.id_for_label }}" class="form-label">购买日期</label>
                                        {{ edit_form.purchase_date }}
                                        {% if edit_form.purchase_date.errors %}
                                        <div class="text-danger">
                                            {% for error in edit_form.purchase_date.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ edit_form.image.id_for_label }}" class="form-label">自行车图片</label>
                                        {{ edit_form.image }}
                                        {% if edit_form.image.errors %}
                                        <div class="text-danger">
                                            {% for error in edit_form.image.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="{{ edit_form.notes.id_for_label }}" class="form-label">备注</label>
                                    {{ edit_form.notes }}
                                    {% if edit_form.notes.errors %}
                                    <div class="text-danger">
                                        {% for error in edit_form.notes.errors %}
                                        <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                
                                <!-- 秘钥输入字段 -->
                                {% if need_secret_key %}
                                <div class="mb-3">
                                    <label for="{{ edit_form.secret_key.id_for_label }}" class="form-label">
                                        <i class="bi bi-key"></i> 管理秘钥 <span class="text-danger">*</span>
                                    </label>
                                    {{ edit_form.secret_key }}
                                    {% if edit_form.secret_key.help_text %}
                                    <div class="form-text">{{ edit_form.secret_key.help_text }}</div>
                                    {% endif %}
                                    {% if edit_form.secret_key.errors %}
                                    <div class="text-danger">
                                        {% for error in edit_form.secret_key.errors %}
                                        <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                {% endif %}
                                
                                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                    <button type="button" class="btn btn-secondary" onclick="toggleEditMode()">
                                        <i class="bi bi-x"></i> 取消
                                    </button>
                                    <button type="submit" class="btn btn-warning">
                                        <i class="bi bi-check"></i> 保存修改
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>


        <!-- 违章信息 -->
        <div class="card bike-card mb-4">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="bi bi-exclamation-triangle"></i> 违章信息
                </h5>
            </div>
            <div class="card-body">
                {% if messages %}
                {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                {% endfor %}
                {% endif %}

                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.violation_type.id_for_label }}" class="form-label">违章类型</label>
                            {{ form.violation_type }}
                            {% if form.violation_type.errors %}
                            <div class="text-danger">
                                {% for error in form.violation_type.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.location.id_for_label }}" class="form-label">违章地点</label>
                            {{ form.location }}
                            {% if form.location.errors %}
                            <div class="text-danger">
                                {% for error in form.location.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="{{ form.description.id_for_label }}" class="form-label">详细描述</label>
                        {{ form.description }}
                        {% if form.description.errors %}
                        <div class="text-danger">
                            {% for error in form.description.errors %}
                            <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.reporter_name.id_for_label }}" class="form-label">检查人姓名（可选）</label>
                            {{ form.reporter_name }}
                            {% if form.reporter_name.errors %}
                            <div class="text-danger">
                                {% for error in form.reporter_name.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.reporter_phone.id_for_label }}" class="form-label">检查人电话（可选）</label>
                            {{ form.reporter_phone }}
                            {% if form.reporter_phone.errors %}
                            <div class="text-danger">
                                {% for error in form.reporter_phone.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">违章照片（可选）</label>
                        
                        <!-- 隐藏的文件输入 -->
                        <input type="file" class="d-none" id="{{ form.violation_images.id_for_label }}" 
                               name="violation_images" accept="image/*">
                        
                        <!-- 上传方式选择按钮 -->
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <button type="button" class="btn btn-outline-primary w-100" id="cameraBtn">
                                    <i class="bi bi-camera"></i><br>
                                    <small>拍照</small>
                                </button>
                            </div>
                            <div class="col-6">
                                <button type="button" class="btn btn-outline-secondary w-100" id="galleryBtn">
                                    <i class="bi bi-image"></i><br>
                                    <small>相册</small>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 文件信息显示区域 -->
                        <div id="fileInfo" class="d-none">
                            <div class="alert alert-info d-flex align-items-center">
                                <i class="bi bi-info-circle me-2"></i>
                                <span id="fileName"></span>
                            </div>
                        </div>
                        
                        <!-- 图片预览区域 -->
                        <div id="imagePreview" class="d-none">
                            <img id="previewImg" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                        </div>
                        
                        <div class="form-text">
                            <small class="text-muted">
                                <i class="bi bi-info-circle"></i> 
                                选择拍照使用摄像头拍摄，或选择相册从本地文件上传<br>
                                <i class="bi bi-exclamation-triangle"></i> 
                                图片将自动压缩至200KB以下，建议上传清晰的照片
                            </small>
                        </div>
                    </div>
                    
                    <!-- 秘钥输入字段 -->
                    {% if need_secret_key %}
                    <div class="mb-3">
                        <label for="{{ form.secret_key.id_for_label }}" class="form-label">
                            <i class="bi bi-key"></i> 管理秘钥 <span class="text-danger">*</span>
                        </label>
                        {{ form.secret_key }}
                        {% if form.secret_key.help_text %}
                        <div class="form-text">{{ form.secret_key.help_text }}</div>
                        {% endif %}
                        {% if form.secret_key.errors %}
                        <div class="text-danger">
                            {% for error in form.secret_key.errors %}
                            <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-warning">
                            <i class="bi bi-send"></i> 提交信息
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 历史违章记录 -->
        {% if violations %}
        <div class="card bike-card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-clock-history"></i> 历史违章记录 
                    <span class="badge bg-secondary">{{ violations|length }}次</span>
                </h5>
            </div>
            <div class="card-body">
                {% for violation in violations %}
                <div class="card violation-card {% if violation.status == 'resolved' %}resolved{% endif %} mb-3">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="card-title">
                                    <span class="badge bg-danger">{{ violation.get_violation_type_display }}</span>
                                    {% if violation.status == 'pending' %}
                                    <span class="badge bg-warning">待处理</span>
                                    {% elif violation.status == 'processing' %}
                                    <span class="badge bg-info">处理中</span>
                                    {% elif violation.status == 'resolved' %}
                                    <span class="badge bg-success">已解决</span>
                                    {% else %}
                                    <span class="badge bg-secondary">已撤销</span>
                                    {% endif %}
                                </h6>
                                <p class="card-text">{{ violation.description }}</p>
                                <small class="text-muted">
                                    <i class="bi bi-geo-alt"></i> {{ violation.location }}
                                    <br>
                                    <i class="bi bi-clock"></i> {{ violation.created_at|date:"Y年m月d日 H:i" }}
                                </small>
                            </div>
                            {% if violation.violation_images %}
                            <img src="{{ violation.violation_images.url }}" alt="违章照片" class="img-thumbnail" style="width: 80px; height: 80px; object-fit: cover;">
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>

    <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
    <script>
        // 切换编辑模式
        function toggleEditMode() {
            const currentUrl = new URL(window.location);
            if (currentUrl.searchParams.get('edit') === 'true') {
                currentUrl.searchParams.delete('edit');
            } else {
                currentUrl.searchParams.set('edit', 'true');
            }
            window.location.href = currentUrl.toString();
        }
        
        // 增强照片上传功能
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('{{ form.violation_images.id_for_label }}');
            const cameraBtn = document.getElementById('cameraBtn');
            const galleryBtn = document.getElementById('galleryBtn');
            const fileInfo = document.getElementById('fileInfo');
            const fileName = document.getElementById('fileName');
            const imagePreview = document.getElementById('imagePreview');
            const previewImg = document.getElementById('previewImg');
            
            // 拍照按钮事件
            if (cameraBtn) {
                cameraBtn.addEventListener('click', function() {
                    // 设置capture属性为environment（后置摄像头）
                    fileInput.setAttribute('capture', 'environment');
                    fileInput.click();
                });
            }
            
            // 相册按钮事件
            if (galleryBtn) {
                galleryBtn.addEventListener('click', function() {
                    // 移除capture属性，允许选择相册
                    fileInput.removeAttribute('capture');
                    fileInput.click();
                });
            }
            
            // 文件选择事件
            if (fileInput) {
                fileInput.addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        // 检查文件大小
                        const fileSizeKB = (file.size / 1024).toFixed(2);
                        const maxSizeKB = 200;
                        
                        // 显示文件信息
                        let fileInfoText = `已选择文件: ${file.name}`;
                        if (file.size > maxSizeKB * 1024) {
                            fileInfoText += ` (${fileSizeKB}KB - 将自动压缩)`;
                        } else {
                            fileInfoText += ` (${fileSizeKB}KB)`;
                        }
                        
                        fileName.textContent = fileInfoText;
                        fileInfo.classList.remove('d-none');
                        
                        // 预览图片
                        if (file.type.startsWith('image/')) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                previewImg.src = e.target.result;
                                imagePreview.classList.remove('d-none');
                                
                                // 添加压缩提示
                                if (file.size > maxSizeKB * 1024) {
                                    const compressionNote = document.createElement('div');
                                    compressionNote.className = 'mt-2 text-warning';
                                    compressionNote.innerHTML = '<i class="bi bi-gear"></i> 图片将在上传时自动压缩至200KB以下';
                                    
                                    // 移除之前的提示
                                    const existingNote = fileInput.parentNode.querySelector('.mt-2.text-warning');
                                    if (existingNote) {
                                        existingNote.remove();
                                    }
                                    
                                    fileInput.parentNode.appendChild(compressionNote);
                                }
                            };
                            reader.readAsDataURL(file);
                        }
                    }
                });
            }
        });
        
        // 秘钥输入限制
        const secretKeyInputs = document.querySelectorAll('input[name="secret_key"]');
        secretKeyInputs.forEach(secretKeyInput => {
            if (secretKeyInput) {
                secretKeyInput.addEventListener('input', function(e) {
                    // 只允许输入数字
                    e.target.value = e.target.value.replace(/[^0-9]/g, '');
                    // 限制长度为4位
                    if (e.target.value.length > 4) {
                        e.target.value = e.target.value.slice(0, 4);
                    }
                });
                
                // 阻止粘贴非数字内容
                secretKeyInput.addEventListener('paste', function(e) {
                    e.preventDefault();
                    const paste = (e.clipboardData || window.clipboardData).getData('text');
                    const numbers = paste.replace(/[^0-9]/g, '').slice(0, 4);
                    e.target.value = numbers;
                });
            }
        });
    </script>
</body>
</html>
